<template>
  <div class="article-tabs">
    <div class="tab-list">
      <div
        v-for="tab in tabs"
        :key="tab.id"
        class="tab-item"
        :class="{ active: currentTab === tab.id }"
        @click="handleTabClick(tab.id)"
      >
        {{ tab.label }}
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  tabs: {
    type: Array,
    required: true
  },
  currentTab: {
    type: String,
    required: true
  }
})

const handleTabClick = (tabId) => {
  emit('change-tab', tabId)
}
</script>

<style lang="scss" scoped>
.article-tabs {
  padding: $spacing-md;
  border-bottom: 1px solid $border-color;

  .tab-list {
    display: flex;

    .tab-item {
      padding: $spacing-xs $spacing-md;
      margin-right: $spacing-md;
      font-size: 14px;
      cursor: pointer;
      position: relative;
      color: $text-regular;

      &:hover {
        color: $primary-color;
      }

      &.active {
        color: $primary-color;
        font-weight: 500;

        &::after {
          content: '';
          position: absolute;
          bottom: -$spacing-md;
          left: 0;
          right: 0;
          height: 2px;
          background-color: $primary-color;
        }
      }
    }
  }
}
</style>
